<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getCommunityArticleDetail, likeCommunityArticle, unlikeCommunityArticle, collectCommunityArticle, uncollectCommunityArticle, getArticleComments, createArticleComment, deleteArticleComment, getCommunityArticles } from '@/api/community'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from '@/stores/user'
import { Delete, Comment, View, Star } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const articleId = route.params.id
const article = ref(null)
const loading = ref(true)
const likeLoading = ref(false)
const collectLoading = ref(false)
const commentList = ref([])
const commentTotal = ref(0)
const commentLoading = ref(false)
const commentContent = ref('')
const commentSubmitting = ref(false)
const replyContentMap = ref({})
const replyLoadingMap = ref({})
const subCommentMap = ref({})
const subCommentLoadingMap = ref({})
const subCommentTotalMap = ref({})
const userStore = useUserStore()
const canDeleteComment = computed(() => {
  const nickname = userStore.userInfo.nickname
  return nickname === '管理员' || nickname === '教师'
})

const fetchArticleDetail = async () => {
  loading.value = true
  try {
    const res = await getCommunityArticleDetail(articleId)
    if ((res.code === 0 || res.code === 200) && res.data) {
      article.value = res.data
      
      // 尝试从分页查询获取用户信息
      try {
        const articlesRes = await getCommunityArticles({
          page: 1,
          pageSize: 20
        })
        
        if ((articlesRes.code === 0 || articlesRes.code === 200) && 
            articlesRes.data && 
            articlesRes.data.records) {
            
          // 找到匹配当前文章ID的记录
          const matchingArticle = articlesRes.data.records.find(a => a.id == articleId)
          
          if (matchingArticle) {
            // 直接使用API返回的createUser作为creatorName，creatorAvatar已经存在
            article.value.creatorName = matchingArticle.createUser || '未知用户'
            article.value.creatorAvatar = matchingArticle.creatorAvatar || ''
          } else {
            // 未找到匹配文章，使用第一篇文章信息
            const firstArticle = articlesRes.data.records[0]
            article.value.creatorName = firstArticle.createUser || '未知用户'
            article.value.creatorAvatar = firstArticle.creatorAvatar || ''
          }
        }
      } catch (err) {
        console.error('获取文章列表失败:', err)
      }
    } else {
      ElMessage.error(res.message || '获取文章失败')
    }
  } catch (e) {
    ElMessage.error('获取文章失败')
  } finally {
    loading.value = false
  }
}

const loadComments = async () => {
  commentLoading.value = true
  try {
    // 尝试获取评论列表
    const res = await getArticleComments(articleId)
    console.log('评论API响应:', res)
    
    // 检查返回数据是否有效
    if ((res.code === 0 || res.code === 200) && Array.isArray(res.data)) {
      commentList.value = res.data || []
      commentTotal.value = res.data?.length || 0
      
      // 调试输出所有评论的parentId
      console.log('所有评论数据:', commentList.value);
      console.log('评论中的parentId值:', commentList.value.map(c => ({id: c.id, parentId: c.parentId})));
      
      if (commentList.value.length > 0) {
        console.log('成功获取评论数据:', commentList.value.length, '条评论')
      } else {
        console.log('评论数据为空数组')
      }
    } else {
      // 处理错误情况
      console.error('获取评论失败:', res.message || '未知错误')
      
      if (res.message && res.message.includes('用户不存在')) {
        console.info('用户未登录或会话已过期，显示空评论状态')
      }
      
      // 无论什么错误都显示空评论状态
      commentList.value = []
      commentTotal.value = 0
    }
  } catch (e) {
    // 捕获所有异常
    console.error('加载评论异常:', e)
    commentList.value = []
    commentTotal.value = 0
  } finally {
    commentLoading.value = false
  }
}

onMounted(async () => {
  // 先确保用户信息已加载
  if (userStore.isLoggedIn && Object.keys(userStore.userInfo).length === 0) {
    try {
      await userStore.fetchUserInfo()
      console.log('用户信息已加载:', userStore.userInfo)
    } catch (error) {
      console.error('加载用户信息失败:', error)
      ElMessage.warning('加载用户信息失败，部分功能可能受限')
    }
  }
  
  fetchArticleDetail()
  loadComments()
})

const handleLike = async () => {
  if (!article.value || likeLoading.value) return
  likeLoading.value = true
  try {
    if (article.value.isLiked) {
      const res = await unlikeCommunityArticle(article.value.id)
      if ((res.code === 0 || res.code === 200) && res.data) {
        ElMessage.success('已取消点赞')
        await fetchArticleDetail()
      } else {
        if (res.code === 400) {
          await fetchArticleDetail()
          return
        }
        ElMessage.error(res.message || '取消点赞失败')
      }
    } else {
      const res = await likeCommunityArticle(article.value.id)
      if ((res.code === 0 || res.code === 200) && res.data) {
        ElMessage.success('点赞成功')
        await fetchArticleDetail()
      } else {
        if (res.code === 400) {
          await fetchArticleDetail()
          return
        }
        ElMessage.error(res.message || '点赞失败')
      }
    }
  } catch (e) {
    if (e.message && e.message.includes('已点赞')) {
      await fetchArticleDetail()
      return
    }
    ElMessage.error('操作失败')
  } finally {
    likeLoading.value = false
  }
}

const handleCollect = async () => {
  if (!article.value || collectLoading.value) return
  collectLoading.value = true
  try {
    if (article.value.isCollected) {
      const res = await uncollectCommunityArticle(article.value.id)
      if ((res.code === 0 || res.code === 200) && res.data) {
        ElMessage.success('已取消收藏')
        await fetchArticleDetail()
      } else {
        ElMessage.error(res.message || '取消收藏失败')
      }
    } else {
      const res = await collectCommunityArticle(article.value.id)
      if ((res.code === 0 || res.code === 200) && res.data) {
        ElMessage.success('收藏成功')
        await fetchArticleDetail()
      } else {
        ElMessage.error(res.message || '收藏失败')
      }
    }
  } catch (e) {
    ElMessage.error('操作失败')
  } finally {
    collectLoading.value = false
  }
}

const handleSubmitComment = async () => {
  // 检查登录状态和用户信息完整性
  if (!userStore.isLoggedIn) {
    ElMessage.warning('请先登录后再评论')
    return
  }
  
  // 检查用户ID是否存在
  const userId = userStore.userInfo?.id || userStore.userInfo?.userId
  if (!userId) {
    ElMessage.warning('用户信息不完整，请刷新页面或重新登录')
    return
  }
  
  if (!commentContent.value.trim()) {
    ElMessage.warning('请输入评论内容')
    return
  }
  
  commentSubmitting.value = true
  try {
    const commentData = {
      articleId,
      commentContent: commentContent.value.trim(),
      parentId: null,  // 顶级评论
    }
    
    const res = await createArticleComment(commentData)
    
    if ((res.code === 0 || res.code === 200) && res.data) {
      ElMessage.success('评论成功')
      commentContent.value = ''
      
      // 延迟加载评论，给后端一些时间处理
      setTimeout(() => {
      loadComments()
      }, 1000)
      
      // 更新文章详情，刷新评论计数
      setTimeout(() => {
        fetchArticleDetail()
      }, 1500)
    } else {
      if (res.message && res.message.includes('用户不存在')) {
        ElMessage.error('评论失败：请重新登录后再试')
        setTimeout(() => {
          userStore.logout() // 登出并重定向到登录页
        }, 2000)
    } else {
      ElMessage.error(res.message || '评论失败')
      }
    }
  } catch (e) {
    console.error('评论失败:', e)
    
    if (e.message && e.message.includes('用户不存在')) {
      ElMessage.error('评论失败：请重新登录后再试')
      setTimeout(() => {
        userStore.logout() // 登出并重定向到登录页
      }, 2000)
    } else {
      ElMessage.error('评论失败: ' + (e?.message || '未知错误'))
    }
  } finally {
    commentSubmitting.value = false
  }
}

const loadSubComments = async (parentId) => {
  subCommentLoadingMap.value[parentId] = true
  try {
    // 确保parentId为数字类型进行比较
    const parentIdNum = Number(parentId);
    console.log(`尝试获取父评论ID=${parentIdNum}的子评论`);
    
    // 调试所有评论的parentId类型
    console.log('评论中的parentId类型:', 
      commentList.value.map(c => ({
        id: c.id, 
        idType: typeof c.id, 
        parentId: c.parentId, 
        parentIdType: typeof c.parentId,
        isMatch: c.parentId == parentIdNum // 使用宽松比较
      }))
    );
    
    // 从已加载的评论列表中过滤出子评论，使用宽松比较
    const childrenComments = commentList.value.filter(comment => comment.parentId == parentIdNum) || [];
    subCommentMap.value[parentId] = childrenComments;
    subCommentTotalMap.value[parentId] = childrenComments.length;
    
    // 调试输出
    console.log(`获取到父评论${parentId}的子评论:`, childrenComments);
  } catch (e) {
    console.error('处理子评论异常:', e);
  } finally {
    subCommentLoadingMap.value[parentId] = false;
  }
}

const handleReply = async (parentId, replyUserId) => {
  // 检查登录状态和用户信息完整性
  if (!userStore.isLoggedIn) {
    ElMessage.warning('请先登录后再回复')
    return
  }
  
  // 检查用户ID是否存在
  const userId = userStore.userInfo?.id || userStore.userInfo?.userId
  if (!userId) {
    ElMessage.warning('用户信息不完整，请刷新页面或重新登录')
    return
  }
  
  const content = replyContentMap.value[parentId]
  if (!content || !content.trim()) {
    ElMessage.warning('请输入回复内容')
    return
  }
  
  replyLoadingMap.value[parentId] = true
  try {
    // 检查replyUserId是否有效
    const validReplyUserId = replyUserId && replyUserId !== 0 ? replyUserId : undefined
    
    const commentData = {
      articleId,
      commentContent: content.trim(),
      parentId,
      replyUserId: validReplyUserId
    }
    
    const res = await createArticleComment(commentData)
    
    if ((res.code === 0 || res.code === 200) && res.data) {
      ElMessage.success('回复成功')
      replyContentMap.value[parentId] = ''
      // 重新加载所有评论，包括子评论
      await loadComments()
      // 更新子评论显示
      await loadSubComments(parentId)
    } else {
      if (res.message && res.message.includes('用户不存在')) {
        ElMessage.error('回复失败：请重新登录后再试')
        setTimeout(() => {
          userStore.logout() // 登出并重定向到登录页
        }, 2000)
    } else {
      ElMessage.error(res.message || '回复失败')
      }
    }
  } catch (e) {
    console.error('回复失败:', e)
    
    if (e.message && e.message.includes('用户不存在')) {
      ElMessage.error('回复失败：请重新登录后再试')
      setTimeout(() => {
        userStore.logout() // 登出并重定向到登录页
      }, 2000)
    } else {
      ElMessage.error('回复失败: ' + (e?.message || '未知错误'))
    }
  } finally {
    replyLoadingMap.value[parentId] = false
  }
}

const handleDeleteComment = async (commentId, parentId = 0) => {
  ElMessageBox.confirm('确定要删除这条评论吗？', '提示', {
    type: 'warning',
    confirmButtonText: '删除',
    cancelButtonText: '取消',
  }).then(async () => {
    const res = await deleteArticleComment(commentId)
    if ((res.code === 0 || res.code === 200) && res.data) {
      ElMessage.success('删除成功')
      if (parentId === 0) {
        loadComments()
      } else {
        loadSubComments(parentId)
      }
    } else {
      ElMessage.error(res.message || '删除失败')
    }
  }).catch(() => {})
}
</script>

<template>
  <div class="article-detail-container" v-if="!loading && article">
    <div class="article-wrapper">
      <div class="article-header-card">
        <div class="article-header">
          <el-avatar :size="60" :src="article.creatorAvatar" />
          <div class="author-info">
            <div class="author-name">{{ article.creatorName }}</div>
            <div class="meta">
              <span>{{ article.createTime }}</span>
              <el-tag v-if="article.categoryName" size="small" effect="plain" style="margin-left: 8px;">{{ article.categoryName }}</el-tag>
            </div>
          </div>
        </div>
        
        <h1 class="article-title">{{ article.title }}</h1>
        
        <div class="article-stats">
          <div class="stat-item">
            <el-icon><View /></el-icon> 
            <span>{{ article.viewCount }}</span>
          </div>
          <div class="stat-item">
            <el-icon><Comment /></el-icon> 
            <span>{{ article.commentCount }}</span>
          </div>
          <div class="stat-item">
            <el-icon><Star /></el-icon> 
            <span>{{ article.likeCount }}</span>
          </div>
          <div class="stat-item">
            <el-icon><Star /></el-icon> 
            <span>{{ article.collectCount }}</span>
          </div>
        </div>
        
        <div class="article-summary" v-if="article.summary">{{ article.summary }}</div>
        
        <img v-if="article.coverImage" :src="article.coverImage" class="article-cover" />
      </div>
      
      <div class="article-content-card">
        <div class="article-content" v-html="article.content"></div>
        
        <div class="article-images" v-if="article.imageList && article.imageList.length">
          <img v-for="img in article.imageList" :key="img" :src="img" class="article-image" />
        </div>
        
        <div class="article-actions">
          <el-button 
            :type="article.isLiked ? 'danger' : 'primary'" 
            :icon="article.isLiked ? 'Star' : 'Star'"
            @click="handleLike"
            :loading="likeLoading"
            :disabled="likeLoading"
            class="action-button"
          >
            {{ article.isLiked ? '已点赞' : '点赞' }}
          </el-button>
          <el-button
            :type="article.isCollected ? 'warning' : 'success'"
            :icon="article.isCollected ? 'Star' : 'Star'"
            @click="handleCollect"
            :loading="collectLoading"
            :disabled="collectLoading"
            class="action-button"
          >
            {{ article.isCollected ? '已收藏' : '收藏' }}
          </el-button>
          <el-button @click="router.back()" class="action-button">返回</el-button>
        </div>
      </div>
      
      <div class="article-comments-card">
        <h3 class="comments-title">评论区</h3>
        
        <div class="comment-input-box">
          <el-input
            v-model="commentContent"
            type="textarea"
            :rows="3"
            maxlength="300"
            show-word-limit
            placeholder="与其赞同别人的话语，不如自己畅所欲言。"
            class="comment-input"
            :disabled="commentSubmitting"
          />
          <el-button
            type="primary"
            class="comment-submit-btn"
            :loading="commentSubmitting"
            :disabled="commentSubmitting || !commentContent.trim()"
            @click="handleSubmitComment"
          >发布</el-button>
        </div>
        
        <div class="comments-list">
          <div class="comment-item" v-for="comment in commentList.filter(c => !c.parentId || c.parentId == 0)" :key="comment.id">
            <div class="comment-author">
              <el-avatar :src="comment.avatar || '/avatar-default.png'" size="default" />
              <div class="comment-author-info">
                <div class="comment-author-name">{{ comment.nickname }}</div>
                <div class="comment-time">{{ comment.createTime }}</div>
              </div>
            </div>
            
            <div class="comment-content">{{ comment.commentContent }}</div>
            
            <div class="comment-actions">
              <el-button link size="small" @click="loadSubComments(comment.id)">
                <el-icon><Comment /></el-icon> 
                <!-- 计算子评论数量 -->
                展开回复 ({{ commentList.filter(c => c.parentId == comment.id).length || 0 }})
              </el-button>
              <el-button v-if="canDeleteComment" link size="small" class="delete-btn" @click="handleDeleteComment(comment.id, 0)">
                <el-icon><Delete /></el-icon> 删除
              </el-button>
            </div>
            
            <div v-if="subCommentMap[comment.id]" class="sub-comments">
              <div v-for="sub in subCommentMap[comment.id]" :key="sub.id" class="sub-comment-item">
                <el-avatar :src="sub.avatar || '/avatar-default.png'" size="small" />
                <div class="sub-comment-content">
                  <div class="sub-comment-header">
                    <span class="sub-nickname">{{ sub.nickname }}</span>
                    <span v-if="sub.replyNickname" class="reply-to">
                      回复 <span class="replied-user">@{{ sub.replyNickname }}</span>
                    </span>
                    <span class="sub-time">{{ sub.createTime }}</span>
                  </div>
                  <div class="sub-comment-text">{{ sub.commentContent }}</div>
                  <el-button 
                    v-if="canDeleteComment" 
                    link
                    size="small" 
                    class="delete-btn sub-delete-btn"
                    @click="handleDeleteComment(sub.id, comment.id)"
                  >
                    删除
                  </el-button>
                </div>
              </div>
              
              <div class="reply-input-box">
                <el-input
                  v-model="replyContentMap[comment.id]"
                  placeholder="回复 @{{ comment.nickname }}"
                  size="small"
                  class="reply-input"
                  :disabled="replyLoadingMap[comment.id]"
                />
                <el-button
                  type="primary"
                  size="small"
                  :loading="replyLoadingMap[comment.id]"
                  :disabled="replyLoadingMap[comment.id] || !replyContentMap[comment.id]?.trim()"
                  @click="handleReply(comment.id, comment.userId)"
                  class="reply-btn"
                >回复</el-button>
              </div>
            </div>
          </div>
          
          <div v-if="commentList.length === 0" class="no-comments">
            <el-empty description="暂无评论，快来发表您的见解吧！"></el-empty>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div v-else class="loading-skeleton">
    <el-skeleton :rows="8" animated />
  </div>
</template>

<style scoped>
.article-detail-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4ebf5 100%);
  font-family: 'Inter', 'Source Sans Pro', 'Microsoft YaHei', sans-serif;
  padding: 30px 0 50px;
}

.article-wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.article-header-card,
.article-content-card,
.article-comments-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
  border: 1px solid rgba(229, 231, 235, 0.7);
  overflow: hidden;
  padding: 30px;
}

.article-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.author-info {
  margin-left: 16px;
}

.author-name {
  font-weight: 600;
  font-size: 18px;
  color: #2c5dff;
  margin-bottom: 4px;
}

.meta {
  font-size: 14px;
  color: #6b7280;
  display: flex;
  align-items: center;
}

.article-title {
  font-size: 28px;
  font-weight: 700;
  color: #333;
  margin: 0 0 20px;
  line-height: 1.3;
}

.article-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #6b7280;
  font-size: 14px;
}

.article-summary {
  font-size: 16px;
  color: #6b7280;
  margin-bottom: 20px;
  line-height: 1.6;
  padding: 15px;
  background-color: #f9fafc;
  border-radius: 8px;
  border-left: 4px solid #2c5dff;
}

.article-cover {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 12px;
  margin-top: 16px;
}

.article-content {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  margin-bottom: 30px;
}

.article-content :deep(h1), 
.article-content :deep(h2), 
.article-content :deep(h3) {
  margin-top: 32px;
  margin-bottom: 16px;
  font-weight: 600;
  color: #1a202c;
}

.article-content :deep(p) {
  margin-bottom: 16px;
}

.article-content :deep(ul), 
.article-content :deep(ol) {
  margin-bottom: 16px;
  padding-left: 24px;
}

.article-content :deep(li) {
  margin-bottom: 8px;
}

.article-content :deep(blockquote) {
  border-left: 4px solid #2c5dff;
  padding-left: 16px;
  color: #6b7280;
  font-style: italic;
  margin: 16px 0;
}

.article-content :deep(code) {
  background-color: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.9em;
}

.article-content :deep(pre) {
  background-color: #1e293b;
  color: #f8fafc;
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 16px 0;
}

.article-content :deep(pre code) {
  background-color: transparent;
  padding: 0;
  color: inherit;
}

.article-content :deep(img) {
  max-width: 100%;
  border-radius: 8px;
  margin: 16px 0;
}

.article-content :deep(a) {
  color: #2c5dff;
  text-decoration: none;
}

.article-content :deep(a:hover) {
  text-decoration: underline;
}

.article-content :deep(table) {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}

.article-content :deep(th), 
.article-content :deep(td) {
  border: 1px solid #e2e8f0;
  padding: 8px 12px;
  text-align: left;
}

.article-content :deep(th) {
  background-color: #f8fafc;
  font-weight: 600;
}

.article-images {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 30px;
}

.article-image {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
}

.article-actions {
  display: flex;
  gap: 16px;
  justify-content: flex-start;
  padding-top: 16px;
  border-top: 1px solid rgba(229, 231, 235, 0.7);
}

.action-button {
  min-width: 100px;
  transition: all 0.3s ease;
}

.action-button:hover {
  transform: translateY(-2px);
}

.comments-title {
  font-size: 22px;
  font-weight: 600;
  color: #2c5dff;
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(229, 231, 235, 0.7);
}

.comment-input-box {
  margin-bottom: 30px;
}

.comment-input {
  margin-bottom: 16px;
}

.comment-submit-btn {
  min-width: 100px;
  float: right;
}

.comments-list {
  margin-top: 30px;
}

.comment-item {
  padding: 20px 0;
  border-bottom: 1px solid rgba(229, 231, 235, 0.7);
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-author {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.comment-author-info {
  margin-left: 12px;
}

.comment-author-name {
  font-weight: 500;
  color: #2c5dff;
  margin-bottom: 2px;
}

.comment-time {
  font-size: 13px;
  color: #94a3b8;
}

.comment-content {
  margin-bottom: 12px;
  line-height: 1.6;
  color: #333;
}

.comment-actions {
  display: flex;
  justify-content: flex-start;
  gap: 16px;
}

.delete-btn {
  color: #ef4444;
}

.delete-btn:hover {
  background-color: #fee2e2;
}

.sub-comments {
  margin-top: 16px;
  padding: 16px;
  background-color: #f8fafc;
  border-radius: 12px;
}

.sub-comment-item {
  display: flex;
  margin-bottom: 16px;
  position: relative;
}

.sub-comment-content {
  margin-left: 12px;
  flex: 1;
}

.sub-comment-header {
  margin-bottom: 4px;
}

.sub-nickname {
  font-weight: 500;
  color: #2c5dff;
}

.reply-to {
  margin-left: 4px;
  color: #6b7280;
}

.replied-user {
  color: #2c5dff;
  font-weight: 500;
}

.sub-time {
  font-size: 12px;
  color: #94a3b8;
  margin-left: 8px;
}

.sub-comment-text {
  color: #333;
  line-height: 1.5;
}

.sub-delete-btn {
  position: absolute;
  right: 0;
  top: 0;
}

.reply-input-box {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.reply-input {
  flex: 1;
}

.reply-btn {
  white-space: nowrap;
}

.no-comments {
  padding: 30px 0;
  text-align: center;
}

.loading-skeleton {
  max-width: 900px;
  margin: 50px auto;
  padding: 30px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
  border: 1px solid rgba(229, 231, 235, 0.7);
}

/* Element Plus overrides */
:deep(.el-button--primary) {
  background-color: #2c5dff;
  border-color: #2c5dff;
}

:deep(.el-button--primary:hover), 
:deep(.el-button--primary:focus) {
  background-color: #1c4de0;
  border-color: #1c4de0;
}

:deep(.el-button--danger) {
  background-color: #f56c6c;
  border-color: #f56c6c;
}

:deep(.el-button--success) {
  background-color: #67c23a;
  border-color: #67c23a;
}

:deep(.el-button--warning) {
  background-color: #e6a23c;
  border-color: #e6a23c;
}

:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
  background-color: #2c5dff;
}

:deep(.el-pagination.is-background .el-pager li:not(.is-disabled):hover) {
  color: #2c5dff;
}

:deep(.el-tag--plain) {
  border-color: #2c5dff20;
  color: #2c5dff;
  background-color: #f0f5ff;
}

/* Responsive styles */
@media (max-width: 768px) {
  .article-wrapper {
    padding: 0 15px;
  }
  
  .article-header-card,
  .article-content-card,
  .article-comments-card {
    padding: 20px;
  }
  
  .article-title {
    font-size: 24px;
  }
  
  .article-actions {
    flex-wrap: wrap;
  }
  
  .action-button {
    flex: 1;
    min-width: auto;
  }
}
</style> 